document.addEventListener('click', event => {

    closeBookSearchWindow(event);
    showBookSearchWindow(event);
    // openBook(event);
})

document.addEventListener('keydown', event => {
    closeBookSearchWindow(event);
})


function openBook(event) {
    // Открываем книгу 

    if (event.target.dataset.book ||
        event.target.closest('[data-book]')) {
        const slug = event.target.closest('[data-book]').dataset.book;
        const url = document.location.host + '/book/' + slug + '/';
        base.sendAjaxRequest(url, 'GET')
            .then(result => {
                console.log(result)
            })
        console.log(url)
    }
}

function closeBookSearchWindow(event) {
    // Закрываем окно для поиска книг


    const $bookSearchWindow = document.querySelector('.book-search-window');
    if (!(event.target.dataset.openBook == 'true') &&
        $bookSearchWindow.classList.contains('a-flip-left') &&
        !event.target.closest('.book-search-window') ||
        event.code == 'Escape') {
        $bookSearchWindow.classList.remove('a-flip-left');
        $bookSearchWindow.classList.add('transparent');
        document.querySelector('.books').innerHTML = '';
        setTimeout(() => {
            document.querySelector('[data-book-search]').value = ''
        }, 500)
    }
}


function showBookSearchWindow(event) {
    // Показываем окно для поиска книг

    if (event.target.dataset.openBook == 'true') {
        event.preventDefault();
        showWindow();
        addContent(event);
        document.querySelector('[data-book-search]').focus();
    } 


    // НИЖЕ ОПРЕДЕЛЕНИ ФУКНЦИЙ

    function addContent(event) {
        // Добавляем содержимое

        base.sendAjaxRequest(url=event.target.href, mehtod='GET')
            .then(result => {
                console.log(event.target.href)
                console.log('result', result)
                render(result);
            })
        

        // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

        function render(data) {
            // Объединяем html с данными

            const template = Hogan.compile(getListOfBooks());
            const output = template.render(data);
            document.querySelector('.books').insertAdjacentHTML('beforeend', output);
        }

        function getListOfBooks() {
            // Получаем список книг в виде html

            return `
            {{#books}}
                <div class="book" data-small-book="true">
                    <a href="/book/{{ slug }}/">
                        <img class="image-small" src="/{{image}}">
                        <div class="book-content">
                            <div class="book-title">
                                {{ title }}
                            </div>
                            <div class="book-description">
                                {{ description }}
                            </div>
                        </div>
                    </a>
                </div>
            {{/books}}
            `
        }
    }


    function getCoordinates() {
        // Получаем координаты

        const left = document.querySelector('.open-book').clientWidth + 10 + 'px';
        return [left, 0]
    }


    function showWindow() {
        // Создаем окно

        const $bookSearchWindow = document.querySelector('.book-search-window');
        const [left, top] = getCoordinates();
        $bookSearchWindow.style.cssText = `
            left: ${left};
            top: ${top};
            display: flex;
        `;
        $bookSearchWindow.classList.add('a-flip-left');
        $bookSearchWindow.classList.add('show-hide-window')
    }
}